<template>
  <div
    class="video"
    :style="{ 'margin-top': top, paddingLeft: spacing, paddingRight: spacing }"
  >
    <video
      v-for="(item, index) in videoList"
      id="video"
      :key="index"
      ref="video"
      :style="{ height: option.videoHeight + 'px' }"
      :autoplay="videoDispose.autoplay"
      :controls="videoDispose.controls"
      :controlslist="videoDispose.controlslist"
      :webkit-playsinline="webkitplaysinline"
      style="width: 100%; height: 100%"
      :poster="item.coverImg"
    >
      <source
        v-show="item.link && item.link === ''"
        :src="view + item.videoId"
      >
      <source v-show="item.link && item.link !== ''" :src="item.link">
    </video>
  </div>
</template>

<script>
import mixins from '../mixins'
export default {
  name: 'AudioFrequency',
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // video配置
      videoDispose: {
        autoplay: false, // 自动播放
        controls: 'controls', // 操作
        controlslist: 'nodownload   noplaybackrate'
        /*
        1、nodownload: 不要下载按钮
        2、nofullscreen: 不要全屏按钮
        3、noremoteplayback: 不要远程回放
        4、disablePictureInPicture 不要画中画按钮
        5、noplaybackrate 不要播放速度按钮
        */
      },
      webkitplaysinline: 'true', // 让视频在小窗内播放，也就是不是全屏播放
      view: '/API-DOCUMENT/document/file/download?id=', // 资源接口前缀
      videoList: [
        {
          videoId: '2302240e46d3f032ea4322801f2a6e37f30980.mp4',
          coverImg:
						'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/0/23/02/24/2302240cc1db93877e4ab2bcd166a22ae76e7b.jpg',
          link: ''
        }
      ]
    }
  },
  mounted() {
    if (
      this.option.fixedData &&
			this.option.fixedData.dataList &&
			this.option.fixedData.dataList.code === '200' &&
			this.option.fixedData.dataList.data.length > 0
    ) {
      this.videoList = this.option.fixedData.dataList.data
    }
  }
}
</script>

<style scoped lang="scss">
.video {
	video {
		border-radius: rem(8);
		width: 100%;
	}
}
</style>
